
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>验证用户是否输入</title>
	<link rel="stylesheet" type="text/css" href="../../common/sui.css">
	<style type="text/css">
		.box{
			width: 500px;
		    margin: 20px auto 0;
		    padding: 40px 20px;
		}
		span.red{
			color: red;
			font-size: 14px;
			display: none;
			margin-left: 10px;
		}
		span.show{
			display: inline-block;
		}
	</style>
</head>
<body>
<form class="box sui-form form-horizontal sui-validate">
	<div class="control-group">
	    <label for="text" class="control-label">请输入用户名:</label>
	    <div class="controls">
	      	<input type="text" placeholder="请输入用户名" id="name" onfocus="hide('ts-name')"><span class="name red" id="ts-name">不能为空!</span>
	    </div>
  	</div>
	<div class="control-group">
	    <label for="text" class="control-label">请输入密码:</label>
	    <div class="controls">
	      	<input type="password" placeholder="请输入密码" id="password" onfocus="hide('ts-password')"><span class="pwd red" id="ts-password">不能为空!</span>
	    </div>
  	</div>
  	<div class="control-group">
	    <label for="text" class="control-label"></label>
	    <div class="controls">
	      	<a href="javascript:;" class="sui-btn" onclick="confirm()">确定</a>
	    </div>
  	</div>
</form>
<script type="text/javascript">
function confirm(){
	let name = document.getElementById('name').value,
		password = document.getElementById('password').value;
	if(name == ""){
		document.getElementById('ts-name').classList.add("show");
	}
	if(password == ""){
		document.getElementById('ts-password').classList.add("show");
	}
}
function hide(name){
	document.getElementById(name).classList.remove("show");
}
</script>
</body>
</html>